<template>
  <el-card class="card">
    <div class="df aic jcsb" slot="header">
      <span>店铺管理</span>
      <el-button v-if="!isEdit" @click="isEdit = !isEdit" type="primary">
        编辑</el-button
      >
      <el-button v-else @click="isEdit = !isEdit" type="success">保存</el-button>
    </div>
    <!-- 表格数据 -->
    <el-form
      :disabled="!isEdit"
      class="form"
      :model="formData"
      label-width="80px"
    >
      <!-- 店铺名称 -->
      <el-form-item label="店铺名称">
        <el-input v-model="formData.name"></el-input>
      </el-form-item>
      <!-- 店铺公共 -->
      <el-form-item label="店铺公告">
        <el-input
          type="textarea"
          :rows="5"
          v-model="formData.bulletin"
        ></el-input>
      </el-form-item>
      <!-- 店铺头像 -->
      <el-form-item label="店铺头像">
        <el-upload
          class="avatar-uploader"
          :action="`${API}/shop/upload`"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
        >
          <img v-if="formData.avatar" :src="formData.avatar" class="avatar" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>
      <!-- 店铺图片，多图上传 -->
      <el-form-item label="店铺图片">
        <el-upload
          :action="`${API}/shop/upload`"
          list-type="picture-card"
          :on-preview="handlePictureCardPreview"
          :on-success="handleShopSuccess"
          :on-remove="handleRemove"
          :file-list="formData.pics"
        >
          <i class="el-icon-plus"></i>
        </el-upload>
      </el-form-item>
      <!-- 配送费 -->
      <el-form-item label="配送费">
        <el-input-number
          v-model="formData.deliveryPrice"
          :min="1"
          :max="1000"
          label="配送费"
        ></el-input-number>
      </el-form-item>
      <!-- 送达时间 -->
      <el-form-item label="送达时间">
        <el-input-number
          v-model="formData.deliveryTime"
          :min="1"
          :max="1000"
          label="配送时间"
        ></el-input-number>
        <!-- <el-input v-model="formData.deliveryTime"></el-input> -->
      </el-form-item>
      <!-- 描述 -->
      <el-form-item label="描述">
        <el-input v-model="formData.description"></el-input>
      </el-form-item>
      <!-- 评分 -->
      <el-form-item label="评分" class="df aic rate">
        <el-rate disabled show-score v-model="value1"></el-rate>
      </el-form-item>
      <!-- 销量 -->
      <el-form-item label="销量">
        <el-input-number
          v-model="formData.sellCount"
          :min="1"
          :max="100000"
          label="配送时间"
        ></el-input-number>
        <!-- <el-input v-model="formData.sellCount"></el-input> -->
      </el-form-item>
      <!-- 活动 -->
      <el-form-item label="活动">
        <el-checkbox-group v-if="formData.supports" v-model="formData.supports">
          <el-checkbox label="在线支付满28减5"></el-checkbox>
          <el-checkbox label="VC无限橙果汁全场8折"></el-checkbox>
          <el-checkbox label="单人精彩套餐"></el-checkbox>
          <el-checkbox label="特价饮品8折抢购"></el-checkbox>
          <el-checkbox label="单人特色套餐"></el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <!-- 营业时间 -->
      <el-form-item label="营业时间">
        <el-time-picker
          is-range
          v-model="formData.date"
          range-separator="至"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          placeholder="选择时间范围"
        >
        </el-time-picker>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script>
// 店铺详情接口
import { getShopInfoReq } from "@/api/shop";
export default {
  data() {
    return {
      formData: {},
      API: "http://sell.h5.itsource.cn:8087",
      //   多张图片上传
      dialogImageUrl: "",
      dialogVisible: false,
      fileList: [
        {
          url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
        },
        {
          name: "food2.jpeg",
          url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
        },
      ],

      //   活动
      checkAll: false,
      isIndeterminate: true,
      //   评分
      value1: 4.6,
      isEdit: false,
    };
  },
  methods: {
    // 右上角编辑和完成的切换
    btnOrbtn() {
      this.isEdit = !this.isEdit;
      // this.disabled = !disabled;
    },
    async getData() {
      // 发送请求
      let res = await getShopInfoReq();

      //   修改数据
      let pics = res.data.data.pics.map((v) => {
        return {
          url: v,
        };
      });
      // console.log(pics);
      //   修改评分
      let score = res.data.data.score / 20;
      //   数据赋值
      this.formData = { ...res.data.data, pics, score };
      // let { ...res.data.data, pics, score }=this.formData
    },

    // 上传成功触发的函数
    // handleAvatarSuccess() {},
    // 上传成功触发的函数
    async handleAvatarSuccess(res) {
      // console.log('res',res);
      // 结构数据
      let { code, msg, imgUrl } = res;
      // 判断
      if (code === 0) {
        // 发请求修改头像
        this.$message.success(msg);
        // 数据回显
        this.formData.avatar = imgUrl;
      }
    },

    // 约束上传类型 && 约束上传大小
    beforeAvatarUpload(file) {
      const isJPG = /(png|jpeg)/.test(file.type);
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是PNG 或 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },

    // 多张图片上传成功的函数
    handleShopSuccess(res) {
      // console.log(res);
      // 解构数据
      let { code, msg, imgUrl } = res;
      // 判断
      if (code === 0) {
        // 修改数据
        this.formData.pics.push({
          url: res.imgUrl,
        });
      }

      console.log("this.formData.pics", this.formData.pics);
    },

    // 多张图片上传的删除函数
    handleRemove(file, fileList) {
      // 存入删除后剩余的图片的数据
      this.formData.pics.push = fileList;
      console.log("fileList", fileList);
    },
    // 多张图片上传的预览函数
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },

    //   活动
    handleCheckAllChange(val) {
      this.checkedCities = val ? cityOptions : [];
      this.isIndeterminate = false;
    },
    handleCheckedCitiesChange(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.cities.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.cities.length;
    },
  },
  created() {
    this.getData();
  },
};
</script>

<style lang="scss" scoped>
.form {
  width: 600px;
}

.avatar-uploader :deep(.el-upload) {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
}
.avatar {
  width: 100px;
  height: 100px;
  display: block;
}

.rate {
  :deep(.el-form-item__content) {
    margin-left: 0px !important;
  }
}
</style>